<template>
    <BMap>
        <!-- <BMarker v-for="(point, index) in points" :key="index" :position="point" icon="loc_red" /> -->
        <!-- <BMarker :position="{ lat: 39.915185, lng: 116.404901 }" icon="end" /> -->
        <BMarker v-for="(item, index) in data" :key="index" :position="item" icon="loc_red" />

    </BMap>

    <div v-for="point in points">{{ point }}</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// import { getBikeList } from "../../api/bike.js"
// import { BMap, BMarker, _Point } from 'vue3-baidu-map-gl'
// const center = { lng: 113.5213534078, lat: 27.6907991732 }

// const data = ref<_Point[]>([center])

// const points = ref([])

getBikeList(1, 100, "", "").then(res => {
    points.value = res.data.records.map((item: any) => (toRaw({
        lng: Number(item.longitude),
        lat: Number(item.latitude)
    })))
    console.log(points.value);

})


// data.value = Array.from({ length: 10 }).map(() => {
//     const random = Math.random() * 0.05
//     const posLng = Math.random() > 0.5 ? -1 : 1
//     const posLat = Math.random() > 0.5 ? -1 : 1
//     return { lat: center.lat + random * posLat, lng: center.lng + random * posLng }
// })



</script>